// Created by lifei on 2020/7/21--9:19.
<template>
  <div class="card-box">
    <div class="card-title">使用单位新增</div>
    <el-form ref="ruleForm" :model="formObj" class="form-wrap" size="small" :rules="rules">
      <el-form-item label="单位名称" prop="unitName">
        <el-input v-model="formObj.unitName" placeholder="请输入单位名称"></el-input>
      </el-form-item>
      <el-form-item label="单位类型" prop="unitType">
        <el-select v-model="formObj.unitType" placeholder="请选择单位类型">
          <el-option v-for="item in lists" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人姓名" prop="userName">
        <el-input v-model="formObj.userName" placeholder="请输入联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="tell">
        <el-input v-model="formObj.tell" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="社会统一信用代码证" prop="creditNumBer">
        <el-input v-model="formObj.creditNumBer" placeholder="请输入社会统一信用代码证"></el-input>
      </el-form-item>
      <el-form-item label="排序号" prop="orderNumBer">
        <el-input v-model="formObj.orderNumBer" placeholder="请输入排序号"></el-input>
      </el-form-item>
      <el-form-item label="时间" prop="latestApplicationTime">
        <el-date-picker v-model="formObj.latestApplicationTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="物业" prop="applyProperty">
        <el-input v-model="formObj.applyProperty" placeholder="请输入物业"></el-input>
      </el-form-item>
      <el-form-item label="附件">
        <!--                <el-input v-model="formObj.attachment" placeholder="请选择附件"></el-input>-->
        <!--                            <el-input v-model="formObj.attachment" placeholder="请选择附件"></el-input>-->
        <!--                            limit 定义上传文件的个数 ， on-exceed 定义超出限制时的行为 ， 可通过设置before-remove来阻止文件移除操作-->
        <el-upload
          class="upload-demo"
          action="/admin/sys-file/upLodeFileAdd"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formObj.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="　"></el-form-item>
      <el-form-item label="　"></el-form-item>
      <el-form-item label="　"></el-form-item>
      <el-form-item class="text-right">
        <el-button type="primary" size="small" @click="goBack()" style="width: 80px" plain>返回</el-button>
        <el-button type="primary" size="small" v-throttle="[updateEntity]" style="width: 80px">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "axios";

export default {
  name: "base-info",
  data () {
    return {
      formObj: {
        id: this.$route.query.id,
        unitName: this.$route.query.unitName,
        unitType: this.$route.query.unitType,
        userName: this.$route.query.userName,
        tell: this.$route.query.tell,
        creditNumBer: this.$route.query.creditNumBer,
        orderNumBer: this.$route.query.orderNumBer,
        latestApplicationTime: this.$route.query.latestApplicationTime,
        applyProperty: this.$route.query.applyProperty,
        attachment: this.$route.query.attachment,
        //附件
        fileList: [
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          },
          { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
        ],
        remark: this.$route.query.remark,
      },
      lists: [{
        value: '学校',
        label: '学校'
      }, {
        value: '社区工作中',
        label: '社区工作中'
      }, {
        value: '卫生',
        label: '卫生'
      }, {
        value: '医院',
        label: '医院'
      }, {
        value: '办公用房',
        label: '办公用房'
      }, {
        value: '党群政府',
        label: '党群政府'
      }, {
        value: '其他',
        label: '其他'
      }],
      //表单校验的字段
      rules: {
        unitName: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        unitType: [
          { required: true, message: '请选择单位类型', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        tell: [
          { required: true, required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        creditNumBer: [
          { required: true, required: true, message: '请输入社会统一信用代码证', trigger: 'blur' }
        ],
        orderNumBer: [
          { required: true, required: true, message: '请输入排序号', trigger: 'blur' }
        ],
        latestApplicationTime: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        applyProperty: [
          { required: true, required: true, message: '请输入物业', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
  },
  methods: {
    /**
     * 修改提交
     */
    updateEntity () {
      //表单验证
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let formData = this.formObj;

          request({
            url: 'http://localhost:3000/resultData/' + this.formObj.id,
            method: 'put',
            data: formData
          }).then((data) => {

            this.$alert('操作完成', '提示', {
              confirmButtonText: '确定',
            });

            this.$router.push('/permission-manage/apply-unit-list')
          }).catch(error => {
            this.$alert('操作失败', '提示', {
              confirmButtonText: '确定',
            });
          }).finally(() => this.loading = false);
        } else {
          return false;
        }
      });

    },
    /**
     * 上传附件相关
     */
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //返回
    goBack () {
      this.$router.push('/permission-manage/apply-unit-list')
    }

  }


}
</script>

<style scoped lang='scss'>
@include formWrap();
</style>

